
<div class="submit-form">
    <p>
        <label for="file">上传附件：</label>
        <input id="file" class="easyui-filebox" style="width:220px" data-options="buttonText:'选择文件',multiple:true">
        <!--<input type="file" id="file" style="width:220px" multiple="multiple" accept="*/*">-->
        <a id="uploadButton" href="javascript:" class="easyui-linkbutton" iconCls="fa fa-upload">上传</a>
    </p>
    <p style="padding-top:10px"><div id="progress" class="easyui-progressbar" style="width:350px;"></div></p>
</div>

<script type="text/javascript">

    var progress = $('#progress');

    $('#uploadButton').click(function () {
        if(!window._ajaxing) {
            window._ajaxing = upload();
        } else {
            progress.progressbar('setValue', 0);
            progress.progressbar({text: '上传取消：0%', value: 0});
            window._ajaxing.abort();
            window._ajaxing= undefined;
        }
        console.log(window._ajaxing);
        if(window._ajaxing) {
            $(this).linkbutton({text: '取消', iconCls: 'fa fa-close'});
        } else {
            $(this).linkbutton({text: '上传', iconCls: 'fa fa-upload'});
        }
    });

    function upload() {
        var formData = new FormData();
        var files = $('#file').filebox('files');
        for(var i=0; files.length > i; i++) {
            formData.append('file[]', files[i]);
        }
        return $.ajax({
            url: Api.System.ATTACHMENT + '/upload_all',
            type: 'post',
            data: formData,
            processData: false, // 不要对data参数进行序列化处理，默认为true
            contentType: false, // 不要设置Content-Type请求头，因为文件数据是以 multipart/form-data 来编码
            xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            var total = e.total;
                            var position = e.loaded || e.position;
                            var percent = Math.ceil(position * 100 / total);
                            progress.progressbar('setValue', percent);
                            progress.progressbar({text: '正在上传...' + percent + '%'});
                            if (percent === 100) {
                                progress.progressbar({text: '正在保存，请稍等...100%', value: 100});
                            }
                        }
                    }, false);
                }
                return xhr;

            },
            success: function (res, statusText, xhr) {
                if (res && res.code) {
                    progress.progressbar('setValue', 0);
                    progress.progressbar({text: '上传失败：0%', value: 0});
                    $.messager.alert('信息', res.message, 'error');
                } else {
                    if (xhr.readyState === 4) {
                        progress.progressbar('setValue', 0);
                        progress.progressbar({text: '未开始：0%', value: 0});
                        $('#file').filebox('clear');
                        $.messager.show({title: '信息', msg: '上传成功'});
                        $('#attachment').datagrid('reload');
                    }
                }
                $('#uploadButton').linkbutton({text: '上传', iconCls: 'fa fa-upload'});
                window._ajaxing= undefined;
            },
            error: function (res) {
                progress.progressbar('setValue', 0);
                progress.progressbar({text: '上传失败：0%', value: 0});
                if(res.responseJSON) {
                    $.messager.alert('信息', res.responseJSON.message, 'error');
                }
                $('#uploadButton').linkbutton({text: '上传', iconCls: 'fa fa-upload'});
                window._ajaxing= undefined;
            }
        });
    }

</script>
